/**
 * 目标1：获取文章列表并展示
 *  1.1 准备查询参数对象
 *  1.2 获取文章列表数据
 *  1.3 展示到指定的标签结构中
 */

//1.1 准备查询参数对象
const queryObj = {
    status: '',//状态：0 待审核 1 已审核
    channel_id: '',//频道 id,空字符串-全部
    page: 1,//当前页码
    per_page: 2//当前页面条数
}
let totalCoun = 0//保存总条数
function setArticleList() {
    // 1.2 获取文章列表数据
    axios.get('/v1_0/mp/articles', {
        params: queryObj
    }).then(result => {
        // 1.3 展示到指定的标签结构中
        console.log(result);
        console.log(result.data.results);
        const htmlStr = result.data.results.map(item => {
            return `<tr>
            <td>
              <img
                src="${item.cover.type === 0 ? 'https://img2.baidu.com/it/u=2640406343,1419332367&fm=253&fmt=auto&app=138&f=JPEG?w=708&h=500' : item.cover.images[0]} "
                alt="">
            </td>
            <td>${item.title}</td>
            <td>
            ${item.status === 1 ? '<span class="badge text-bg-primary">待审核</span>' : '<span class="badge text-bg-success">审核通过</span>'}
            </td>
            <td>
              <span>${item.pubdate}</span>
            </td>
            <td>
              <span>${item.read_count}</span>
            </td>
            <td>
              <span>${item.comment_count}</span>
            </td>
            <td>
              <span>${item.like_count}</span>
            </td>
            <td data-id="${item.id}">
              <i class="bi bi-pencil-square edit"></i>
              <i class="bi bi-trash3 del"></i>
            </td>
          </tr>`
        }).join('')
        console.log(htmlStr);
        document.querySelector('.art-list').innerHTML = htmlStr

        //3.1保存并设置总条数
        totalCoun = result.data.total_count
        document.querySelector('.total-count').innerHTML = `供${totalCoun}条`
    })
}
setArticleList()
/**
 * 目标2：筛选文章列表
 *  2.1 设置频道列表数据
 *  2.2 监听筛选条件改变，保存查询信息到查询参数对象
 *  2.3 点击筛选时，传递查询参数对象到服务器
 *  2.4 获取匹配数据，覆盖到页面展示
 */
//2.1 设置频道列表数据  
async function serChannelList() {
    const res = await axios({
        url: '/v1_0/channels'
    })
    console.log(res);
    const htmlStr = res.data.channels.map(item => `<option value="${item.id}">${item.name}</option>`).join('')
    console.log(htmlStr);
    document.querySelector('.form-select').innerHTML = htmlStr
}
//网页运行后默认调用一次
serChannelList()
//2.2 监听筛选条件改变，保存查询信息到查询参数对象
document.querySelectorAll('.form-check-input').forEach(radio => {
    // console.log(radio);
    radio.addEventListener('change', function () {
        // console.log(this.value);
        queryObj.status = this.value
        // setArticleList()
    })
})
document.querySelector('.form-select').addEventListener('change', function () {
    // console.log(this.value);
    queryObj.channel_id = this.value
    // setArticleList()
})
//2.3 点击筛选时，传递查询参数对象到服务器
document.querySelector('.sel-btn').addEventListener('click', function () {
    setArticleList()
})
/**
 * 目标3：分页功能
 *  3.1 保存并设置文章总条数
 *  3.2 点击下一页，做临界值判断，并切换页码参数并请求最新数据
 *  3.3 点击上一页，做临界值判断，并切换页码参数并请求最新数据
 */

//3.2 点击下一页，做临界值判断，并切换页码参数并请求最新数据
document.querySelector('.next').addEventListener('click', e => {
    if (queryObj.page < Math.ceil(totalCoun / queryObj.per_page)) {
        queryObj.page++
        document.querySelector('.page-now').innerHTML = `第${queryObj.page}页`
        setArticleList()
    }
})
//3.3 点击上一页，做临界值判断，并切换页码参数并请求最新数据
document.querySelector('.last').addEventListener('click', e => {
    if (queryObj.page > 1) {
        queryObj.page--
        document.querySelector('.page-now').innerHTML = `第${queryObj.page}页`
        setArticleList()
    }
})
/**
 * 目标4：删除功能
 *  4.1 关联文章 id 到删除图标
 *  4.2 点击删除时，获取文章 id
 *  4.3 调用删除接口，传递文章 id 到服务器
 *  4.4 重新获取文章列表，并覆盖展示
 *  4.5 删除最后一页的最后一条，需要自动向前翻页
 */

document.querySelector('.art-list').addEventListener('click', e => {
    // console.log(e.target);
    if (e.target.classList.contains('del')) {
        const id = e.target.parentNode.dataset.id
        console.log(id);
        axios.delete(`/v1_0/mp/articles/${id}`).then(result => {
            console.log(result);
        })
        //4.5 删除最后一页的最后一条，需要自动向前翻页
        const children = document.querySelector('.art-list').children
        if (children.length === 1 && queryObj.page > 1) {
            queryObj.page--
            document.querySelector('.page-now').innerHTML = `第${queryObj.page}页`
        }
        setArticleList()
    }
})


// 点击编辑时，获取文章 id，跳转到发布文章页面传递文章 id 过去
document.querySelector('.art-list').addEventListener('click', e => {
    if (e.target.classList.contains('edit')) {
        const id = e.target.parentNode.dataset.id
        console.log(id);
        console.log(e.target.parentNode.dataset);
        location.href = `../publish/index.html?id=${id}`
        // const res = await axios({
        //     url: `/v1_0/mp/articles/${id}`,
        //     method: 'get'
        // })
    }
})